<template>
  <div class="container">

    <!-- 搜索区域 -->
    <el-row>
      <el-form :inline="true">
        <el-form-item label="评价Id">
          <el-input v-model="queryInfo.id" placeholder="请输入评价ID"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <!-- 表格区域 -->
    <el-table :data="usermarkList" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="120px"></el-table-column>
      <el-table-column prop="consult.name" label="咨询师" width="140px">
      </el-table-column>
      <el-table-column prop="user.username" label="用户" width="140px">
      </el-table-column>
      <el-table-column prop="marktext" label="评论内容">
      </el-table-column>
      <el-table-column prop="markstar" label="星级">
        <template slot-scope="scope">
        <el-rate
            v-model="scope.row.markstar"
            disabled
            show-score
            text-color="#ff9900">
        </el-rate>
        </template>
      </el-table-column>
      <el-table-column prop="createtime" label="创建时间" width="180px">
      </el-table-column>
      <el-table-column label="操作" width="180px">
        <template slot-scope='scope'>
          <el-link type="primary" @click="toDeleteUsermark(scope.row.id)">删除评论</el-link>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                   :current-page="queryInfo.pageNum" :page-sizes="[4, 6, 8, 10]" :page-size="queryInfo.pageSize"
                   layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 下拉框
      value: '',
      dialogImageUrl: '', // 预览图片路径
      dialogVisible: false, // 预览图片的对话框
      // 查询信息对象
      queryInfo: {
        userId: ''
      },
      total: 0,
      usermarkList: [],
      title: '添加', // 对话框标题
      dialogFormVisible: false, // 是否显示对话框
      usermark: {
        // 文章对象
        "id":'',
        "consultId":1,
        "userId":1,
        "appId": 1,
        "marktext":'',
        "markstar":0,
        "user":{
          "id":'',
          "username":''
        },
        "consult":{
          "id":'',
          "name":''
        }
      },
      fileList:[],
      usermarkTypeList:[]
    }
  },
  methods: {
    //查询typeId
    // queryUsermarkType(){
    //   // 调用后端接口来获取数据
    //   this.$http.get('usermarktype/selectAll')
    //       .then(resp => {
    //         if (resp.data.status == 200) {
    //           console.log(resp.data)
    //           this.usermarkTypeList = resp.data.data.list;
    //           this.total = resp.data.data.total;
    //           console.log(this.usermarkTypeList)
    //         } else {
    //           this.$message.error('查询失败！')
    //         }
    //       })
    // },
    // 处理上传成功的函数
    handleSuccess(response){
      // 把上传后的图片路径，交给文章对象的tabularChart
      this.usermark.tabularchart = response.message;
      console.log(this.usermark.tabularchart);
    },

    // 删除图片的事件
    handleRemove(file, fileList) {
      console.log(file, fileList);
      //  在取消函数，添加成功， 修改成功的函数中加入以下代码实现图片的清空
      this.fileList=[]
      // 移除数据
      this.usermark.tabularChart='';
    },
    // 预览图片事件
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 添加文章
    addUsermark() {
      this.$http.post("usermark/insert", this.usermark)
          .then(resp => {
            if (resp.data.status == 200) {
              // 消息提示
              this.$message.success('添加成功！');
              // 清空数据
              this.usermark = {
                // 文章对象
                "id":'',
                "consultId":1,
                "userId":1,
                "appId": 1,
                "marktext":'',
                "markstar":0,
                "user":{
                  "id":'',
                  "username":''
                },
                "consult":{
                  "id":'',
                  "name":''
                }
              }
              this.fileList=[]
              // 关闭对话框
              this.dialogFormVisible = false;
              // 重新查询
              this.queryList()
            } else {
              this.$message.error('接口异常！')
            }
          })
    },
    //删除
    toDeleteUsermark(id){
      this.usermark.id = id;
      // 调用后端接口来获取数据
      this.$http.post('usermark/delete', this.usermark
      )
          .then(resp => {
            if (resp.data.status === 200) {
              this.$message.success('删除成功！')
              this.fileList=[]
              this.usermark.id = '';
              this.queryList();
            } else {
              this.$message.error('删除失败！')
              this.fileList=[]
              this.usermark.id = '';
            }
          })
    },
    /// 取消对话框
    cancle() {
      this.dialogFormVisible = false;
      this.usermark = {
        // 文章对象
        "id":'',
        "consultId":1,
        "userId":1,
        "appId": 1,
        "marktext":'',
        "markstar":0,
        "user":{
          "id":'',
          "username":''
        },
        "consult":{
          "id":'',
          "name":''
        }
      }
      this.fileList=[]
    },
    //搜索
    search(){
      this.$http.get('usermark/selectById',{params:this.queryInfo})
          .then(resp => {
            console.log(resp)
            if (resp.data.status === 200) {
              console.log(resp.data)
              this.usermarkList = [];
              this.usermarkList[0] = resp.data.data;
              console.log(this.usermarkList)
            } else {
              this.$message.error('暂无数据！')
            }
          })
    },
    // 进入添加的对话框
    toAddUsermark() {
      this.title = "新增文章";
      this.dialogFormVisible = true;
    },
    handleSizeChange(size) {
      this.queryInfo.pageSize=size;
      console.log("size"+size)

      this.queryList();
    },
    handleCurrentChange(num) {
      this.queryInfo.pageNum=num;
      console.log('num:'+num)

      this.queryList();
    },
    // 分页查询信息的方法
    queryList() {
      console.log(this.queryInfo);
      // 调用后端接口来获取数据
      this.$http.get('usermark/selectAll', {
        params: this.queryInfo
      })
          .then(resp => {
            if (resp.data.status == 200) {
              console.log(resp.data)
              this.usermarkList = resp.data.data.list;
              this.total = resp.data.data.total;
              console.log(this.usermarkList)
            } else {
              this.$message.error('查询失败！')
            }
          })
    }
  },
  mounted() {
    this.queryList();
  }
}
</script>
<style>
/**设置富文本编辑器的最小高度，注意style中不能使用scoped **/
.ql-container{
  min-height: 200px;
}
.el-breadcrumb {
  margin-bottom: 15px;
  padding: 0 0 15px;
  border-bottom: 1px solid #ddd;
}

.el-pagination {
  margin-top: 15px;
}

.el-link {
  padding: 0 5px;
}
</style>